<!-- pages/member/manage.vue -->
<template>
	<view class="container">
		<!-- 顶部标题 -->
		<view class="header">
			<text class="title">会员等级管理</text>
		</view>

		<!-- 筛选区域 -->
		<uni-card class="filter-box">
			<view class="filter-item">
				<text class="filter-label">会员等级：</text>
				<uni-data-select v-model="filterLevel" :localdata="grades"></uni-data-select>
			</view>
			<uni-button class="button" type="primary" size="mini" @click="save">保存会员等级</uni-button>
		</uni-card>

		<!-- 操作栏 -->
		<view class="action-bar">
			<uni-icons type="plus-filled" size="30" color="#007AFF" @click="showAddDialog"></uni-icons>
		</view>

		<jlgCard></jlgCard>

		<!-- 添加弹窗 -->
		<uni-popup ref="addPopup" type="dialog">
			<uni-popup-dialog mode="input" title="添加新卡片" @confirm="confirmAdd">
				<uni-forms ref="form">
					<uni-forms-item label="卡片编号" required>
						<uni-easyinput v-model="formData.cardNumber" />
					</uni-forms-item>
					<uni-forms-item label="卡密" required>
						<uni-easyinput v-model="formData.cardSecret" />
					</uni-forms-item>
				</uni-forms>
			</uni-popup-dialog>
		</uni-popup>
	</view>
</template>

<script>
	import jlgCard from '../jlg-card/list.vue'

	const db = uniCloud.database()

	export default {
		data() {
			return {
				grades: [],
				filterLevel: '',
				formData: {
					level: '',
					cardNumber: '',
					cardSecret: ''
				},
				userId: '',
			}
		},
		components: {
			jlgCard
		},
		mounted() {
			this.loadGradeList()
		},
		onLoad(options) {
			this.userId = options.id
		},
		methods: {
			// 加载会员等级列表
			async loadGradeList() {
				const res = await db.collection('jlg-parameter')
					.orderBy('grade', 'asc')
					.get()
				// 遍历res.result.data，将每个对象的grade字段作为value，name字段作为text，添加到grades数组中
				res.result.data.forEach(item => {
					this.grades.push({
						value: item._id,
						text: item.user_grade_name
					})
				})
			},


			showAddDialog() {
				this.$refs.addPopup.open()
			},

			async confirmAdd() {
				if (!this.validateForm()) return

				try {
					await uniCloud.callFunction({
						name: 'addCard',
						data: this.formData
					})
					uni.showToast({
						title: '添加成功'
					})
					this.resetForm()
					this.$refs.addPopup.close()
				} catch (e) {
					uni.showToast({
						title: '添加失败',
						icon: 'none'
					})
				}
			},

			validateForm() {

				if (!this.formData.cardNumber) {
					uni.showToast({
						title: '请输入卡片编号',
						icon: 'none'
					})
					return false
				}
				if (!this.formData.cardSecret) {
					uni.showToast({
						title: '请输入卡密',
						icon: 'none'
					})
					return false
				}
				return true
			},
			async save() {
				try {
					const res = await uniCloud.callFunction({
						name: 'jlg-member',
						data: {
							user_id: this.userId,
							target_grade: this.filterLevel
						}
					})

					if (res.result.code === 200) {
						uni.showToast({
							title: '变更成功'
						})
						this.$refs.table.clearSelection()
						this.closePopup()
					} else {
						uni.showToast({
							title: res.result.msg,
							icon: 'none'
						})
					}
				} catch (e) {
					uni.showToast({
						title: '请求失败',
						icon: 'none'
					})
				}
			},
			resetForm() {
				this.formData = {
					level: '',
					cardNumber: '',
					cardSecret: ''
				}
			},

			formatTime(timestamp) {
				return new Date(timestamp).toLocaleString()
			}
		}
	}
</script>

<style scoped>
	.container {
		padding: 24rpx;
		max-width: 1200px;
		margin: 0 auto;
	}

	.header {
		text-align: center;
		padding: 48rpx 0;
		border-bottom: 2rpx solid #eee;
	}

	.title {
		font-size: 36rpx;
		font-weight: bold;
		color: #333;
	}

	.filter-box {
		margin: 24rpx 0;
		background: #f8f8f8;
		height: 300rpx;
		position: relative;

		.button {
			position: absolute;
			bottom: 50rpx;
			right: 40rpx;
		}
	}

	.filter-item {
		display: flex;
		align-items: center;
		margin: 24rpx 0;
	}

	.filter-label {
		font-size: 28rpx;
		color: #666;
		margin-right: 24rpx;
	}

	.action-bar {
		display: flex;
		justify-content: flex-end;
		margin: 24rpx 0;
	}

	.data-table {
		margin-top: 24rpx;
		border-radius: 12rpx;
		overflow: hidden;
		box-shadow: 0 4rpx 12rpx rgba(0, 0, 0, 0.1);
	}

	/* PC端适配 */
	@media (min-width: 768px) {
		.container {
			padding: 32rpx 64rpx;
		}

		.data-table {
			font-size: 28rpx;
		}
	}
</style>